<template>
  <div class="menu-container">
    <div class="avatar">
      <Avatar :size="80" url="http://localhost:4000/uploads/image/avatar/avatar-1757066315364.jpg"></Avatar>
    </div>
    <p class="nickname" style="text-align: center; color: #FFD700;
    font-size: 20px; height: 25px; 
    line-height: 25px;
    padding: 2px 0;
    margin: 10px 0;"><span>{{ 'LinZedong' }}</span></p>
    <div class="menu">
      <ul>
        <li v-for="(i) in tabs" :key="i.name">
          <!-- 阻止元素默认事件用vue提供的修饰符 -->

          <router-link :to="i.path" class="a" :class="{active: i.id === activeId}">
            <!-- <a :href="i.path" @click="onClick(i.id)" :class="{active: isSelected(i)}"> -->
            <!-- a标签后序应该替换为 router-view -->
            <div class="icon" :class="{ activeIcon: i.id === activeId }">
              <!-- <div class="icon" :class="{ activeIcon: isSelected(i) }"> -->
              <Icon :type="i.icon"></Icon>
            </div>
            <span :class="{ activeTxt: i.id === activeId }">{{ i.name }}</span>
            <!-- <span :class="{ activeTxt: isSelected(i) }">{{ i.name }}</span> -->
          </router-link>
        </li>
      </ul>
    </div>
    <div class="extra">
      <Contact></Contact>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/Icon'
import Contact from '@/components/Contact'
import Avatar from '@/components/Avatar'
export default {
  components: {
    Icon,
    Contact,
    Avatar
  },
  data() {
    return {
      tabs: [
        {
          icon: 'home',
          name: '主页',
          id: 0,
          path: '/'
        },
        {
          icon: 'blog',
          name: '博客',
          id: 1,
          path: '/blog',
          startWith: true
        },
        {
          icon: 'about',
          name: '关于我',
          id: 2,
          path: '/about'
        },
        {
          icon: 'code',
          name: '项目&效果',
          id: 3,
          path: '/code'
        },
        {
          icon: 'comment',
          name: '留言板',
          id: 4,
          path: '/comment'
        },
        {
          icon: 'todo',
          name: '计划',
          id: 5,
          path: '/todo'
        },
        {
          icon: 'unknown',
          name: '待定',
          id: 6,
          path: '/unknown'
        },
      ],
      // activeNum: 0
    }
  },
  computed: {
    activeId() {
      // 获取当前路由
      const currPath = this.$route.path.toLowerCase()
      const tab = this.tabs.find(item => {
        // 兼容路由前缀
        if (item.startWith) {
          return currPath.startsWith(item.path.toLowerCase()) // 对于有支持前缀匹配的路由 用startsWith 判断
        } else {
          return currPath === item.path.toLowerCase()
        }
      })
      return tab ? tab.id : 0
    }
  },
  methods: {
    // onClick(id) {
    //   this.activeNum = id
    // },
    isSelected(item) {
      const link = item.path.toLowerCase()
      const currPath = location.pathname.toLowerCase()
      if(item.startWith) {
        return currPath.startsWith(link)
      } else {
        return link === currPath
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/mixin.less";
@import "~@/styles/var.less";
.menu-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: @deepdark;
  display: flex;
  flex-direction: column;
  align-items: center;
  // transform: scaleX(1);
  // transform-origin: left center;
  // transition: width 300ms linear;
  .avatar {
    position: relative;
    width: inherit;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;

    @border: 80px;
    &::before {
      position: absolute;
      content: '';
      height: @border;
      width: @border;
      border: 2px outset @gold;
      border-radius: 50%;
      transition: all 1000ms ease-in-out;
      transform: rotate(0);
    }

    &:hover::before {
      // animation: name duration timing-function delay iteration-count direction fill-mode;
      animation: avatar-spin 1200ms linear infinite;
    }
    @keyframes avatar-spin {
      0% {
        transform: rotate(0deg);
        border: 2px outset #FFD700;
      }
      20% {
        transform: rotate(360deg);
        border: 6px ridge #FFD700;
      }
      25% {
        transform: rotate(360deg);
        border: 12px ridge @eva;
      }
      50% {
        transform: rotate(360deg);
        border: 10px double @cyber;
      }
      70% {
        transform: rotate(360deg);
        border: 5px inset #FFD700;
      }
      75% {
        transform: rotate(360deg);
        border: 5px double @eva;
      }
      100% {
        transform: rotate(720deg);
        border: 2px outset #FFD700;
      }
    }
  }

  .nickname {
    color: #333;
    line-height: 2;

    span {
      /* right-bottom 设置无鼠标经过时,背景图是在右下方开始的 */
      background: linear-gradient(to right, @eva, @cyber) no-repeat right bottom;
      /* 宽度 高度 */
      background-size: 0 2px;
      transition: background-size 700ms;
      font-size: 18px;

      &:hover {
        /* 鼠标经过后,强行将背景开始的方向从 右 变成了 左边，以至于最终效果是 左进右出 */
        background-position-x: left;
        background-size: 100% 2px;
      }
    }
  }

  .menu {
    width: 100%;
    height: 50%;
    // position: absolute;
    // left: 0;
    // top: 60;

    ul {
      width: inherit;
      height: inherit;
      margin: 0;
      padding: 0;
      list-style: none;
      color: @gray;

      @lh: 40px;
      li {
        height: @lh;
        line-height: @lh;
        padding-left: 10px;
        padding-right: 40px;
        margin: 5px 0;
        background: transparent;
        cursor: pointer;
        overflow: hidden;
        
        .a {
          width: 100%;
          height: 100%;
          display: block;
          display: flex;
          align-items: center;
          transition: all 300ms ease-in-out;
          border-radius: 5px;
          // padding: 4px 5px;
          padding-left: 15px;

          .icon {
            margin-right: 10px;
            font-size: 22px;
            transition: all 300ms ease-in-out;
          }
          .activeIcon {
            font-size: 30px !important;
          }
          span {
            font-size: 15px;
            transition: all 300ms ease-in-out;
          }
          .activeTxt {
            font-size: 22px;
          }
        }
      }
      .active {
        .grandient-btn(#4ECDC4, @cyber);
        color: @eva;
        font-weight: bold;
      }
    }
  }
  .extra {
    width: 100%;
    height: 18%;
    // position: absolute;
    // bottom: 0;
    // left: 0;
  }
}
</style>